<template>
    <div class="dashboard-container">
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>用户总数</span>
                            <el-tag type="success" size="small">实时</el-tag>
                        </div>
                    </template>
                    <div class="card-body">
                        <div class="number">{{ stats.userCount }}</div>
                        <div class="text">较昨日 {{ stats.userIncrease > 0 ? '+' : '' }}{{ stats.userIncrease }}%</div>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>医生总数</span>
                            <el-tag type="warning" size="small">实时</el-tag>
                        </div>
                    </template>
                    <div class="card-body">
                        <div class="number">{{ stats.doctorCount }}</div>
                        <div class="text">较昨日 {{ stats.doctorIncrease > 0 ? '+' : '' }}{{ stats.doctorIncrease }}%</div>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>问诊总数</span>
                            <el-tag type="danger" size="small">实时</el-tag>
                        </div>
                    </template>
                    <div class="card-body">
                        <div class="number">{{ stats.consultCount }}</div>
                        <div class="text">较昨日 {{ stats.consultIncrease > 0 ? '+' : '' }}{{ stats.consultIncrease }}%</div>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>处方总数</span>
                            <el-tag type="info" size="small">实时</el-tag>
                        </div>
                    </template>
                    <div class="card-body">
                        <div class="number">{{ stats.prescriptionCount }}</div>
                        <div class="text">较昨日 {{ stats.prescriptionIncrease > 0 ? '+' : '' }}{{ stats.prescriptionIncrease }}%</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
    import { reactive } from 'vue'

    interface Stats {
        userCount: number
        userIncrease: number
        doctorCount: number
        doctorIncrease: number
        consultCount: number
        consultIncrease: number
        prescriptionCount: number
        prescriptionIncrease: number
    }

    const stats = reactive<Stats>({
        userCount: 1234,
        userIncrease: 5.2,
        doctorCount: 567,
        doctorIncrease: -2.1,
        consultCount: 890,
        consultIncrease: 3.4,
        prescriptionCount: 321,
        prescriptionIncrease: 1.5
    })
</script>

<style lang="scss" scoped>
    .dashboard-container {
        padding: 20px;

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-body {
            text-align: center;
            padding: 20px 0;

            .number {
                font-size: 24px;
                font-weight: bold;
                color: #303133;
                margin-bottom: 10px;
            }

            .text {
                font-size: 14px;
                color: #909399;
            }
        }
    }
</style>
